<template>
  <div class="aside-bottom" style="min-width: 200px; position: relative">
    <!-- 拖拽条 -->
    <div v-if="resizeShow" class="aside-bottom-resize" @mousedown="handleMouseDown"></div>
    <div id="scrollableDiv" class="aside-bottom-content scroller" v-html="ansiHtml" style="margin-top: 15px; font-size: 16px; line-height: 1.2"></div>
  </div>
</template>
  <script>
/* eslint-disable */
import { AnsiUp } from "ansi_up";
export default {
  props: {
    // 控制拖拽条的是否显示，默认显示
    resizeShow: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      startY: 0, // 鼠标开始位置
      moveLen: 0, // 鼠标移动的距离
      curLen: 0, // 当前宽度
      otherBoxHeight: 0, // 另一个盒子的宽度
      resizeBox: null, // 拖拽条
      currentBox: null, // 当前盒子
      parentBox: null, // 当前盒子
      rightBox: null, // 右侧盒子
      upBox: null, // 右侧盒子
      ansiHtml: "", // 用于存储转换后的HTML
    };
  },
  methods: {
    getPreviousElement(element) {
      if (element.previousElementSibling) {
        // 如果存在上一个元素兄弟节点，则直接返回
        return element.previousElementSibling;
      } else {
        // 否则，遍历上一个兄弟节点，直到找到一个元素节点
        var prev = element.previousSibling;
        while (prev && prev.nodeType !== 1) {
          // nodeType === 1 表示元素节点
          prev = prev.previousSibling;
        }
        return prev;
      }
    },
    handleMouseDown(e) {
      this.resizeBox = e.target;
      console.log(this.resizeBox);

      this.currentBox = this.resizeBox.parentNode; // 当前盒子
      this.upBox = this.getPreviousElement(this.currentBox);
      if (!this.upBox) return;
      this.curLen = this.currentBox.clientHeight;
      this.parentBox = this.currentBox.parentNode;
      this.otherBoxHeight = this.parentBox.clientHeight - this.currentBox.clientHeight - this.upBox.clientHeight; // 其他盒子的宽度
      console.log(this.otherBoxHeight);
      // 颜色改变提醒
      // this.resizeBox.style.background = "#818181";
      this.startY = e.clientY;
      document.addEventListener("mousemove", this.onMousemove);
      document.addEventListener("mouseup", this.onMouseup);
    },
    onMouseup() {
      // 颜色恢复
      // this.resizeBox.style.background = "#d6d6d6";
      document.removeEventListener("mousedown", this.onMouseDown);
      document.removeEventListener("mousemove", this.onMousemove);
      console.log("鼠标松开了！");
      console.log("移动的距离：", this.moveLen);
    },
    onMousemove(e) {
      // console.log("鼠标移动了！");
      const endY = e.clientY;
      this.moveLen = endY - this.startY; // 移动的距离
      // console.log("移动的距离：", this.moveLen);
      const CurBoxLen = this.curLen - this.moveLen;
      const leftBoxLen = this.parentBox.clientHeight - CurBoxLen - this.otherBoxHeight;

      // const CurBoxLen = this.curLen + moveLen; // resize[i].left+移动的距离=左边区域最后的宽度
      // const rightBoxLen =
      //   this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxHeight; // 右侧宽度=总宽度-左侧宽度-其它盒子宽度
      // // 当最小宽度时，无法继续拖动
      // if (CurBoxLen <= 200 || leftBoxLen <= 200) return;
      console.log("当前盒子的高度：", CurBoxLen);

      this.currentBox.style.height = CurBoxLen + "px"; // 当前盒子的宽度
      // this.resizeBox.style.left = CurBoxLen; // 设置左侧区域的宽度
      this.upBox.style.height = leftBoxLen + "px";
    },
  },
  watch: {
    // 监听 question 的变化
    "$store.state.log_data"(newValue, oldValue) {
      if (!newValue) return;
      var ansi_up = new AnsiUp();
      this.ansiHtml += ansi_up.ansi_to_html(newValue) + "<br>";
      var scrollableDiv = document.getElementById("scrollableDiv");
      scrollableDiv.scrollTop = scrollableDiv.scrollHeight; // 滚动到div的底部
      this.$store.state.log_data = "";
    },
  },
};
</script>
<style lang="less">
.aside-bottom {
  width: 50%;
  /* background-color: #1f222d; */
  border-color: #010208;
  /* display: flex;  */
  /* overflow-x: hidden; */
}
.aside-bottom-content {
  /* height: 300px; 设置固定高度   */
  width: 100%;
  height: 100%;
  /* overflow-x: auto; */
  overflow-y: auto;
  overflow-wrap: break-word;
}
.aside-bottom-resize {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  cursor: ns-resize;
  /* z-index: 1; */
  background-color: #d0d0d0;
}
.aside-bottom-resize:hover {
  background-color: #a1a1a1;
}
.scroller::-webkit-scrollbar {
  width: 3px;
  height: 8px;
}

.scroller::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.scroller::-webkit-scrollbar-thumb {
  background-color: rgb(147, 147, 153, 0.5);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
</style>